import {
  BaseFormItemConfig,
  BaseFormItemConfigInterface
} from '@/util/vnode_create_util/dynamic_form_creator/dynamic_form_item_creator';
import { h, VNode } from 'vue';
import { Loading, ToOmitDes } from '@/global';
import { ElButton } from 'element-plus';

interface ButtonConfig<T> {
  label: string;
  loading: Loading,
  buttonType: InstanceType<typeof ElButton>['type'];
  callBack: (config: BaseFormItemConfigInterface<T>, buttonType: ButtonConfig<T>, formData: T) => VNode
}
export interface ButtonFormItemConfigInterface<T> extends BaseFormItemConfigInterface<T> {
  buttons: ButtonConfig<T>[];
}

export class ButtonFormItemConfig<T> extends BaseFormItemConfig<T> implements ButtonFormItemConfigInterface<T> {
  buttons: ButtonConfig<T>[];
  public constructor (data: ToOmitDes<ButtonFormItemConfigInterface<T>, 'createMethod'>) {
    super(data);
    this.buttons = data.buttons;
  }

  createMethod (config: this, formData: T): VNode {
    return <div>
      {config.buttons.map(item => <ElButton type={item.buttonType} loading={item.loading.status} onClick={() => item.callBack(config, item, formData)}>{item.label}</ElButton>)}
    </div>;
  }
}
